<!-- 基本信息 -->
<template>
	<view class="pd-lr30" :style="{ '--color': vuex_config.themeColor1 }">
		<template v-if="vuex_user.pk_id">
			<u-form :model="form" ref="userInfo_form">
				<!-- <u-form-item label="用户头像" label-width="134rpx" label-height="87rpx" prop="headimgurl">
					<image mode="aspectFill" class="avatar" :src="form.headimgurl" @click="uploadimg"></image>
				</u-form-item> -->

				<u-form-item label="用户姓名" label-width="134rpx" label-height="87rpx" prop="real_name" required>
					<u-input v-model="form.real_name" placeholder="请输入名字" />
				</u-form-item>
				<!-- <u-form-item label="用户昵称" label-width="134rpx" label-height="87rpx" prop="nickname">
					<u-input v-model="form.nickname" placeholder="请输入名字" />
				</u-form-item> -->
				<u-form-item label="性别" label-width="134rpx">
					<view class="arrow_box">
						<view class="cell_cont" @click="sexVisible = true">{{ form.sex | formFilter() }}</view>
						<view class="icon_arrow iconfont iconfont-e775"></view>
					</view>
				</u-form-item>
				<!-- <u-form-item label="地址" label-width="134rpx" prop="area" required><u-input v-model="form.area" placeholder="请输入您的地址" /></u-form-item> -->
				<template v-if="form.type == 2 || form.type == 3 || form.type == 4">
					<u-form-item label="微信号" label-width="134rpx" prop="weixin">
						<u-input v-model="form.weixin" placeholder="请输入微信号" />
					</u-form-item>
					<u-form-item label="qq" label-width="134rpx" prop="qq">
						<u-input v-model="form.qq" placeholder="请输入qq号" />
					</u-form-item>
				</template>
				<u-form-item label="手机号码" label-width="134rpx" prop="mobile" required>
					<u-input class="item_cont" v-model="form.mobile" placeholder="请输入手机号码" :disabled="mobileDisabled" />
				</u-form-item>
				<!-- <u-form-item label="收款方式" label-width="134rpx" prop="r_type" required><u-input v-model="form.r_type" placeholder="请输入收款方式" /></u-form-item> -->
				<template v-if="form.type == 2 || form.type == 3 || form.type == 4">
					<u-form-item label="收款账户" label-width="134rpx" prop="account">
						<view v-if="!showPassWord" class="account_box">
							<u-input class="account_input" v-model="accountCompute" placeholder="请输入收款账户" disabled />
							<view class="edit iconfont iconfont-e628" @click="editChange(true)"></view>
						</view>
						<u-input class="account_input" v-else v-model="form.account" focus placeholder="请输入收款账户"
							@blur="editChange(false)" />
					</u-form-item>
					<u-form-item label="开户人" label-width="134rpx" prop="name">
						<u-input v-model="form.name" placeholder="请输入开户人" />
					</u-form-item>
				</template>
				<u-form-item label="用户标签" label-width="134rpx" prop="tag" v-if="tagList && tagList[0]">
					<view class="arrow_box">
						<view class="cell_cont" @click="tagVisible = true">设置标签</view>
						<view class="icon_arrow iconfont iconfont-e775"></view>
					</view>
				</u-form-item>
				<view class="xy" v-if="vuex_business.agreement && saveType">
					<u-checkbox v-model="checked" name="1"></u-checkbox>
					<text class="xy-title" @click="opensq">请仔细阅读并同意《用户协议》</text>
				</view>
			</u-form>
			<u-popup v-model="showagreement" mode="bottom" border-radius="20" height="80%">
				<view class="agreement_box">
					<scroll-view scroll-y>
						<u-parse :html="content"></u-parse>
					</scroll-view>
				</view>
			</u-popup>
			<u-popup v-model="tagVisible" mode="bottom">
				<view class="label_text" v-if="tagList[0]">
					<view :class="['label_item', checkSelect(item.name, form.tag) ? 'label_color' : '']"
						@click="changeTag(item.name)" v-for="(item, index) in tagList" :key="index">
						{{ item.name }}
					</view>
				</view>
			</u-popup>
			<u-picker mode="selector" v-model="sexVisible" :range="sexArr" range-key="label" @confirm="changeSex">
			</u-picker>
			<view class="btn_box">
				<view class="post"><button @click="submit" class="btn">{{saveType?'提交申请':'保存'}}</button></view>
			</view>
		</template>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		uploadImage,
	} from '@/utils/upload';
	import {
		uniToast
	} from '@/utils/uniPromise.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				oldMobile: '',
				mobileDisabled: false,
				sexArr: [{
					value: 1,
					label: '男'
				}, {
					value: 2,
					label: '女'
				}],
				sexVisible: false,
				tagVisible: false,
				checked: false,
				content: '',
				showagreement: false,
				saveType: '', // 有值表示申请为分销商
				// 表单数据
				form: {
					users_id: '',
					users_webchat_id: '',
					headimgurl: '',
					real_name: '',
					mobile: '', //手机号码
					sex: '', //性别
					weixin: '',
					qq: '',
					tag: [], // 标签
					area: '', //现住地址
					r_type: '', //收款方式
					account: '', //收款账户
					name: '', //开户人名
					level: '',
					type: '',
					nickname: '',
				},
				tagList: [], // 可选标签
				// 表单校验规则
				rules: {
					real_name: [{
						required: true, //必填
						message: '请输入姓名',
						trigger: 'blur' //触发方法类型，支持多个方法
					}],
					area: [{
						message: '请输入您的地址',
						trigger: 'blur'
					}],
					mobile: [{
						// 自定义验证函数
						validator: this.isMobile,
						message: '请正确输入手机号',
						trigger: 'blur'
					}],
					r_type: [{
						required: true,
						message: '请输入收款方式',
						trigger: 'blur'
					}],
				},
				showPassWord: false
			};
		},
		filters: {
			formFilter(type) {
				if (type == 1) {
					return '男';
				} else if (type == 2) {
					return '女';
				} else {
					return '保密';
				}
			}
		},
		computed: {
			accountCompute() {
				let str = this.form.account
				if (str) {
					let len = str.length - 4
					let accStr = '******'
					return str.substring(0, 4) + accStr + str.substring(len)
				} else {
					return ''
				}
			}
		},
		onLoad(options) {
			this.$login('initPage', options, 'goBack').then(() => {
				this.initPage(options)
			})
		},
		methods: {
			...mapActions(['loadUserInfo', 'loadBusinessInfo']),
			initPage(options) {
				if (options.type) {
					this.saveType = options.type
				}
				// this.loadBusinessInfo().then(res => {
				this.getInfo()
				// })
				this.getTagList();
				if (this.vuex_business.agreement) {
					this.content = this.vuex_business.agreement || ''
				}
				// #ifdef  MP-TOUTIAO  || MP-BAIDU
				// 字节小程序不支持$nextTick
				setTimeout(() => {
					this.$refs.userInfo_form.setRules(this.rules);
				}, 500)
				// #endif 

				// #ifndef  MP-TOUTIAO || MP-BAIDU
				this.$nextTick(() => {
					this.$refs.userInfo_form.setRules(this.rules);
				})
				// #endif 
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						this.$linkTo('index')
					}
				})
			},
			opensq() {
				this.showagreement = true
			},
			// 获取基本信息
			getInfo() {
				this.$resPost('GetUsersInfo').then(({
					data
				}) => {
					let params = {
						users_id: data.fk_users_id || '',
						users_webchat_id: data.pk_id || '',
						headimgurl: data.headimgurl || '',
						real_name: data.real_name || '',
						mobile: data.mobile || '',
						sex: data.sex || '',
						weixin: data.weixin || '',
						qq: data.qq || '',
						tag: (data.users_tag || '').split(','),
						area: data.area || '',
						name: data.name || '',
						r_type: data.r_type || '',
						account: data.account || '',
						level: data.level || '',
						type: data.type || '',
						nickname: data.nickname || ''
					}
					let title = '基本信息'
					// this.saveType == 'newapplyDist' 等我用了配置页，这个就不需要了
					if (this.saveType == 'newapplyDist' || this.vuex_business.pk_id == 1046) {
						if (params.type == 1) {
							// 根据是否需要审核判断
							params.type = this.vuex_business.examine == 1 ? 2 : 3
							if (this.vuex_business.examine == 1) {
								delete params.level
							}
							title = '申请团长'
						}
					} else if (this.saveType == 'applyDist') {
						if (params.type == 1) {
							// 根据是否需要审核判断
							params.type = this.vuex_business.examine == 1 ? 2 : 3
							if (this.vuex_business.examine == 1) {
								delete params.level
							}
							title = '申请好物推荐官'
						}
					}
					uni.setNavigationBarTitle({
						title: title
					})
					this.oldMobile = data.mobile
					if (data.mobile && data.password) {
						this.mobileDisabled = true
					}
					this.form = {
						...params
					}
				})
			},
			editChange(val) {
				this.showPassWord = val
			},
			// 获取标签
			getTagList() {
				this.$resPost('GetCommonDictionaryList', {
					type: 7
				}).then(({
					data
				}) => {
					this.tagList = data;
				});
			},
			// 判断当前标签是否被选中
			checkSelect(name, list) {
				return list.some(function(item) {
					return item === name;
				});
			},
			// 修改标签
			changeTag(name) {
				let index = this.form.tag.findIndex(item => {
					return item === name;
				});
				if (index !== -1) {
					this.form.tag.splice(index, 1);
				} else {
					this.form.tag.push(name);
				}
			},
			changeSex(index) {
				this.form.sex = this.sexArr[index].value;
			},
			// uview自带的验证：手机号码验证
			isMobile(rule, value, callback) {
				return this.$u.test.mobile(value);
			},
			mobileBlur() {
				return new Promise((resolve, reject) => {
					this.$resPost('VerifyPhoneRegister', {
						phone: this.form.mobile
					}).then((res) => {
						if (res.data == 1) {
							reject()
						} else {
							resolve()
						}
					}).catch(() => {
						reject()
					})
				})
			},
			// 上传图片
			uploadimg() {
				uploadImage(1).then(res => {
					this.form.headimgurl = res[0]
				});
			},
			// 点击提交
			submit() {
				if (this.vuex_business.agreement && this.saveType && !this.checked) return uniToast('请阅读协议')
				this.$refs.userInfo_form.validate(valid => {
					if (valid) {
						uni.showLoading({
							title: '保存中...',
							mask: true
						})
						if (this.form.mobile && this.oldMobile && this.oldMobile != this.form.mobile) {
							this.mobileBlur().then(() => {
								this.startSave()
							}).catch(() => {
								this.$hide()
								this.$toast('该手机号已被注册使用')
								this.$hide()
							})
						} else {
							this.startSave()
						}
					} else {}
				});
			},
			startSave() {
				let params = {
					...this.form,
					type: this.form.type || 1,
					tag: this.form.tag.join(',')
				}
				this.$resPost('SetApplyDistributor', params).then(({
					data
				}) => {
					if (this.form.type == 3) {
						/*分销商申请*/
						uni.setStorageSync('applyDistributorKey', 3)
					}
					this.loadUserInfo()
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})

				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pd-lr30 {
		padding: 0 30rpx;
	}

	.account_box {
		display: flex;
		align-items: center;
		width: 100%;

		.account_input {
			flex: 1;
			overflow: hidden;
		}

		.edit {
			padding: 0 10rpx 0 16rpx;
		}
	}

	.agreement_box {
		padding: 10rpx 24rpx;
	}

	.xy {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;

		.xy-title {
			color: #409eff;
			position: relative;
			right: 24rpx;
			top: 4rpx;
		}
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-left: auto;
		background-color: #f5f5f5;
		border-radius: 50%;
		overflow: hidden;
	}

	.arrow_box {
		width: 100%; // h5的样式需要
		display: flex;
		align-items: center;

		.cell_cont {
			flex: 1;
			overflow: hidden;
			text-align: right;
		}

		.icon_arrow {
			color: #bfbfbf;
			text-align: right;
			padding-left: 10rpx;
		}
	}

	.item_cont {
		width: auto;
	}

	.label_text {
		max-height: 420rpx;
		overflow-y: auto;
		padding: 0 30rpx;
		display: flex;
		margin-top: 50rpx;
		flex-wrap: wrap;
		align-items: center;

		.label_item {
			line-height: 46rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			margin-right: 29rpx;
			margin-bottom: 29rpx;
			border: 1px solid #bfbfbf;
			color: #bfbfbf;
		}

		// 选择标签之后的样式
		.label_color {
			border: 1px solid var(--color);
			color: var(--color);
		}
	}

	.btn_box {
		height: 100rpx;

		.post {
			z-index: 100;
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				color: #fff;
				background-color: var(--color);
				width: 660rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}

	// h5的调整样式
	/deep/ .u-input__input {
		text-align: right;
	}

	/deep/ .u-form-item {
		text-align: right;
	}

	/deep/ .u-form-item--left__content__label {
		margin-left: 6rpx;
	}

	/deep/ .uni-input-wrapper {
		padding-left: 30rpx;
		box-sizing: border-box;
	}
</style>